<template>
  <div>
    <Row class="margin-top-20">
      <i-button type="primary" icon="plus" @click="handleClickGoTobind">绑定终端</i-button>
      <i-button type="success" @click="handleClickGoToCloudSpeak">云喇叭管理</i-button>
    </Row>
    <Row class="margin-top-20">
      <i-table :columns="columns" :data="data"></i-table>
      <Page class="fr margin-top-20" show-total :total="page.total" :page-size="page.size" :current="page.current" :show-elevator="true" @on-change="handleChangeCurrent"></Page>
    </Row>
    <Row>
      <Modal v-model="modal" title="终端详情" width="400">
        <div>
          <p>终端编号：{{ dialog_item.sys_code }}</p>
          <p>终端类型：{{ dialog_item.category_name }}</p>
          <p>终端名称：{{ dialog_item.device_name }}</p>
          <p>终端SN码：{{ dialog_item.device_sn }}</p>
          <p>绑定状态：{{ dialog_item.status }}</p>
          <p v-if="dialog_item.category_name === '云打印'">客户云密码：{{ dialog_item.pwd }}</p>
          <p v-if="dialog_item.category_name === '云打印'">连接状态：{{ dialog_item.conn_status }}</p>
          <p>所属门店：{{ dialog_item.store_name }}</p>
          <p>绑定时间：{{ dialog_item.create_at }}</p>
          <p>终端备注：{{ dialog_item.desc }}</p>
        </div>
        <div slot="footer">
          <i-button type="primary" @click="handleFieldBind">解除绑定</i-button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
import { TerminalInit, TerminalPage, TerminalFiedBind, TerminalList } from '@/api/terminal';

export default {
  name: 'terminal',
  data() {
    return {
      modal: false,
      data: [],
      columns: [
        { title: '终端SN码', align: 'center', key: 'device_sn' },
        { title: '终端类型', align: 'center', key: 'category_name' },
        { title: '终端名称', align: 'center', key: 'device_name' },
        { title: '终端门店', align: 'center', key: 'store_name' },
        { title: '绑定时间', align: 'center', key: 'create_at' },
        { title: '操作', align: 'center', render: (h, params) => {
          return h('div', null, [
            h('i-button', {
              props: {type: 'text'},
              style: { color: '#2d8cf0' },
              on: {
                click: () => {
                  this.handleTableList(params.row.id)
                }
              }
            }, '查看')
          ])
        } }
      ],
      page: {
        size: 1,
        current: 1,
        total: 0
      },
      dialog_item: {
        id: '',
        sys_code: '',
        device_sn: '',
        status: '',
        conn_status: '',
        pwd: '',
        device_name: '',
        category_name: '',
        create_at: '',
        store_name: '',
        desc: '',
      }
    }
  },
  methods: {
    handleDocumentInit() {
      TerminalInit(this.$route.query.store_id).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.binds.data
          this.page.size = res.data.data.binds.per_page
          this.page.current = res.data.data.binds.current_page
          this.page.total = res.data.data.binds.total
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleChangeCurrent(v) {
      TerminalPage(this.$route.query.store_id, v).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.binds.data
          this.page.size = res.data.data.binds.per_page
          this.page.current = res.data.data.binds.current_page
          this.page.total = res.data.data.binds.total
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleClickGoTobind() {
      this.$router.push({ name: 'bindTerminal', query: { store_id: this.$route.query.store_id }})
    },
    handleClickGoToCloudSpeak() {
      this.$router.push({ name: 'cloudSpeaker', query: { store_id: this.$route.query.store_id }})
    },
    handleFieldBind() {
      this.$Modal.confirm({
        title: '解绑终端',
        okText: '决意解绑',
        cancelText: '再考虑一下',
        content: '<p>终端解绑后将无法正常使用终端功能，你是否确定解除'+ this.dialog_item.category_name + this.dialog_item.device_sn +'</p>',
        onOk: () => {
          TerminalFiedBind(this.dialog_item.id).then(res => {
            if (res.data.code === 0) {
              TerminalPage(this.$route.query.store_id, this.page.current).then(res => {
                if (res.data.code === 0) {
                  this.data = res.data.data.binds.data
                  this.page.size = res.data.data.binds.per_page
                  this.page.current = res.data.data.binds.current_page
                  this.page.total = res.data.data.binds.total
                  this.modal = false
                } else {
                  this.$Message.error(res.data.message)
                }
              })
              this.$Message.success(res.data.message)
            } else {
              this.$Message.error(res.data.message)
            }
          })
        }
      })
    },
    handleTableList(id) {
      TerminalList(id).then(res => {
        if (res.data.code === 0) {
          this.dialog_item.desc = res.data.data.bind.remarks
          this.dialog_item.store_name = res.data.data.bind.store_id
          this.dialog_item.create_at = res.data.data.bind.create_at
          this.dialog_item.category_name = res.data.data.bind.category_name
          this.dialog_item.device_name = res.data.data.bind.device_name
          this.dialog_item.pwd = res.data.data.bind.pwd
          this.dialog_item.status = res.data.data.bind.status
          this.dialog_item.device_sn = res.data.data.bind.device_sn
          this.dialog_item.sys_code = res.data.data.bind.sys_code
          this.dialog_item.id = res.data.data.bind.id
          this.dialog_item.conn_status = res.data.data.bind.conn_status
          this.modal = true
        } else {
          this.$Message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>

<style lang="less" scoped>
  @import '../terminal.less';
</style>
